<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>随手快递</title>
    <link rel="stylesheet" type="text/css" href="../../AUI/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="../../myCss/reset.css"/>
    <link rel="stylesheet" href="../../myCss/pullToRefresh.css"/>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=a37424dd342449fb8ab5f809081e01ce&plugin=AMap.CitySearch"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        #wrapper {
            width: 100%;
            height:65%;
            max-width:640px;
            margin:0 auto;
            background: transparent;
        }
        .sort{
            display: none;
            width: 100%;
            height: 172px;
            position: fixed;
            z-index: 99;
            background: #fff;
            left: 0;
            font-size: 14px;
            text-align: center;
            border-bottom:1px solid #ededed;
        }
        .dist{
            display: none;
            width: 100%;
            height: 170px;
            position: fixed;
            z-index: 99;
            background: #fff;
            left: 0;
            font-size: 14px;
            text-align: center;
            border-bottom:1px solid #ededed;
        }
        .sort div{
            padding: 6px 0;
            border-top:1px solid #ededed;
        }
        .dist div{
            padding: 6px 0;
            border-top:1px solid #ededed;
        }
        .act{
            color: #38c89f;
        }
        .pannel{
            border: 2px dashed #8e9fff;
            margin:0 10px 8px 10px;
        }
        /*遮罩层*/

        .z_mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            display: none;
        }

        .z_alert {
            width:75%;
            height: 130px;
            border-radius: .2rem;
            background: rgba(249, 249, 249, 0.98);
            font-size:15px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .place{
            font-size: 14px;
            right: 0;
            color: #0f0f0f;
            display: inline-block;
            margin-right: -70px;
        }
        .store{
            font-size: 17px;
            font-family: 黑体;
            color: #0f0f0f;
            margin-top:0px;
            display: inline-block;
        }
        .trade{
            color: #676767;
            font-size: 14px;
        }
    </style>
</head>
<body style="overflow: hidden;">
<!--遮罩层-->
<div class="mask" id="login">
    <div class="alert">
        <p id="words">请先登录</p>
    </div>
</div>

<header class="aui-bar aui-bar-nav" id="header">
</header>
<div class="mask" id="left"></div>
<div id="banner"></div>

<div class="aui-searchbar" id="search"style="margin-top: 45px;">
    <div class="aui-searchbar-input aui-border-radius" tapmode >
        <i class="aui-iconfont aui-icon-search"></i>
        <form action="javascript:search();">
            <input type="search" placeholder="输入购买地地址" id="search-input">
        </form>
    </div>
    <div class="ser" id="ser">搜索</div>
</div>
<section class="aui-content"style="" >
    <div class="aui-card-list" style="padding-left: 7px">
        <div style="font-size: 14px;color: #3d3d3d;padding: 5px;display: inline-block" ><span id="sortBtn">普通排序 </span><span>▽</span></div>
        <div style="font-size: 14px;color: #3d3d3d;padding: 5px;display: inline-block" ><span id="sortBtn1">全部 </span><span>▽</span></div>
        <div class="sort" id="sort">
            <div class="act" onclick="sortC(this)">普通排序</div>
            <div onclick="sortC(this)">距离优先</div>
            <div onclick="sortC(this)">最新发布</div>
            <div onclick="sortC(this)">小费优先</div>
            <div onclick="sortC(this)">信誉最好</div>
        </div>
        <div class="dist" id="dist">
            <div class="act" onclick="sortD(this)">全部</div>
            <div onclick="sortD(this)">附近500m</div>
            <div onclick="sortD(this)">附近1000m</div>
            <div onclick="sortD(this)">附近2000m</div>
            <div onclick="sortD(this)">附近5000m</div>
        </div>
        <div style="font-size: 14px;color: #3d3d3d;padding: 5px;display: inline-block;float: right;margin-right: 10px" onclick="location.href='../map/orderMap.html'">
           <span style="font-size: 11px"> 订单地图</span></div>
        <img src="../../myImage/mapppp.png" style="width: 20px;float: right;margin-top: 7px"></div>
</section>

<div id="wrapper" >
    <ul id="initUl">
    </ul>
</div>
<footer class="aui-bar aui-bar-tab" id="footer"></footer>
<div id="container" style="display: none"></div>
<script type="text/javascript">

</script>
<script type="text/javascript" src="../../AUI/script/api.js" ></script>
<script src="../../myJs/jquery.js"></script>
<script src="../../myJs/jquery.cookie.js"></script>
<script type="text/javascript" src="../../AUI/script/aui-tab.js" ></script>
<script src="../../myJs/iscroll.js"></script>
<script src="../../myJs/pullToRefresh.js"></script>
<script type="text/javascript" src="../../AUI/script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../myJs/index.js" ></script>
<script type="text/javascript">
    var geolocation;
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 11
    });
    //获取用户所在城市信息
    function showCityInfo() {
        //实例化城市查询类
        var citysearch = new AMap.CitySearch();
        //自动获取用户IP，返回当前城市
        citysearch.getLocalCity(function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                if (result && result.city && result.bounds) {
                    var cityinfo = result.city;
                    var citybounds = result.bounds;
                    document.getElementById('city').innerHTML =cityinfo;
                    //地图显示当前城市
                    map.setBounds(citybounds);
                }
            } else {
                document.getElementById('city').innerHTML = result.info;
            }
        });
    }

    map.plugin('AMap.Geolocation', function() {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition:'RB'
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
      /*  AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息*/
    });

   /*  var data ={
        "user": {
            "userId": "2",
            "status": "2",
            "nickname": "hahahaha",
            "creditScore":80,
            "headPortraitUrl": "../../myImage/login.jpg"
        },
        "msg": [
            {
                "demandId": "1",
                "userId": "1",
                "headPortraitUrl": "../../myImage/7.jpg",
                "nickname": "summery",
                "tradeName": "旺旺小小酥6包，乐事薯片青柠味3包，烤肉味4包",
                "purchaseStore": "物美超市",
                "purchasePlace": "文泽路四号大街五号路口",
                "demandCreatetime": "11：12"
            },
            {
                "demandId": "2",
                "userId": "2",
                "headPortraitUrl": "../../myImage/5.png",
                "nickname": "胖子",
                "tradeName": "抹茶星冰乐",
                "purchaseStore": "星巴克",
                "purchasePlace": "天街一楼",
                "demandCreatetime": "12：12"
            },
            {
                "demandId": "3",
                "userId": "3",
                "headPortraitUrl": "../../myImage/4.jpg",
                "nickname": "小白兔",
                "tradeName": "酸菜鱼",
                "purchaseStore": "丁哥黑鱼馆",
                "purchasePlace": "高沙",
                "demandCreatetime": "11：32"
            }
        ]
    } */
    //解析定位结果
    function onComplete(data1) {
       /* var str=['定位成功'];
        str.push('经度：' + data1.position.getLng());
        str.push('纬度：' + data1.position.getLat());*/
        sessionStorage.setItem("lng",  data1.position.getLng());
        sessionStorage.setItem("lat",  data1.position.getLat());
       // alert(data1.position.getLat());
        //viewList(data);
       /* if(data1.accuracy){
            str.push('精度：' + data1.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data1.isConverted ? '是' : '否'));
        document.getElementById('tip').innerHTML = str.join('<br>');*/
    }
    //解析定位错误信息
/*    function onError(data) {
        document.getElementById('tip').innerHTML = '定位失败';
    }*/


    var userId,userState;
    $(function(){
        index();
        showCityInfo();
        $("#item1").addClass("aui-active");
        userState = sessionStorage.getItem("userState");
        userId = sessionStorage.getItem("userId");
        if(userId==null||userId==-1){
            userId = -1;
            sessionStorage.setItem("userId", userId);
           // alert(userId);
            $("#home").on("click",function(){
                $("#login").show().delay(2000).hide(300,function(){
                    window.location.href="../system/login.html";
                });
            })
        }else{
            $("#home").on("click",function(){
                $("#banner").css("display","block");
                $("#left").css("display","block");
            })

            $("#left").on("click",function(){
                $("#banner").css("display","none");
                $("#left").css("display","none");
            })
        }
        if(userState==null){
            userState = 1;
        }
        sessionStorage.getItem("lat");
       $.ajax({
            type: "post",
            url: '/randomdelivery/userPurchaseController/homePage',
            data: {
            },
            datatype: "json",
            success: function (data) {
                alert(JSON.stringify(data));
                viewList(data);
            }

        });

        //viewList(data);
    });


    function viewList(data){
      //  alert(userState);
      if(data.user!=null){
        if(data.user.permissions==1){
            sessionStorage.setItem("permissions", data.user.permissions);
            $("#tobe").hide();
        }else{
             $("#courier").hide();
        }
        $("#nickname").html(data.user.nickname);
        sessionStorage.setItem("nickname", data.user.nickname);
        $("#head-img").attr("src",data.user.headPortraitUrl);
        sessionStorage.setItem("headPortraitUrl", data.user.headPortraitUrl);
        $("#creditScore").html(data.user.creditScore);
        sessionStorage.setItem("creditScore", data.user.creditScore);
      } 
        $.each(data.msg,function(num,data){
        	if(data.purchasePlace==""){
        		data.purchasePlace = "就近购买";
        	}
            $("#initUl").append(' <li>\
                    <div class="aui-card-list" >\
                    <div class="userinfo-header">\
                    <div class="aui-info aui-border-b" style="padding: 7px 0">\
                    <div class="aui-info-item">\
                    <img onclick="info(this)" userId="'+data.userId+'" src="'+data.headPortraitUrl+'" style="width:1.5rem;margin-left: 5px;border-radius:100%"/>\
                    <span class="aui-margin-l-10">'+data.nickname+'</span>\
            </div>\
            <div class="aui-info-item" style="padding-right: 10px;font-size: 11px">'+data.demandCreatetime+'<div style="float: right;font-size: 11px">&nbsp;| 距离1.1km</div></div>\
            </div>\
            </div>\
            <div class="aui-card-list-content-padded" demandId="'+data.demandId+'"onclick="orderD(this)" style="height: 100%">\
            <div class="store">'+data.purchaseStore+'</div>\
            <div class="place">('+data.purchasePlace+')</div>\
            <div style="float:right"><i class="fa fa-rmb" style="color: red" aria-hidden="true"></i>&nbsp;'+data.reward+'</div>\
            <div class="trade"><i class="fa fa-shopping-cart" style="color: #fba999" aria-hidden="true"></i>&nbsp;&nbsp;'+data.tradeName+'</div>\
            </div>\
            </div>\
            </li>');
        })

    }

    function search(data){
    	 $("#initUl").html("");
         $.each(data.msg,function(num,data){
             $("#initUl").append(' <li>\
                     <div class="aui-card-list" >\
                     <div class="userinfo-header">\
                     <div class="aui-info aui-border-b" style="padding: 7px 0">\
                     <div class="aui-info-item">\
                     <img onclick="info(this)" userId="'+data.userId+'" src="'+data.headPortraitUrl+'" style="width:1.5rem;margin-left: 5px;border-radius:100%"/>\
                     <span class="aui-margin-l-10">'+data.nickname+'</span>&nbsp;&nbsp;<span class="fa fa-star" style="color: #FFC107"></span>\
             </div>\
             <div class="aui-info-item" style="padding-right: 10px;font-size: 11px">'+data.demandCreatetime+'<div style="float: right;font-size: 11px">&nbsp;| 距离1.1km</div></div>\
             </div>\
             </div>\
             <div class="aui-card-list-content-padded" demandId="'+data.demandId+'"onclick="orderD(this)" style="height: 100%">\
             <div class="store">'+data.purchaseStore+'</div>\
             <div class="place">('+data.purchasePlace+')</div>\
                   <div class="trade"><i class="fa fa-shopping-cart" style="color: #fba999" aria-hidden="true"></i>&nbsp;&nbsp;'+data.tradeName+'</div>\
                   <div class="trade"><i class="fa fa-rmb" style="color: red" aria-hidden="true"></i>&nbsp;&nbsp;'+data.reward+'</div>\
             </div>\
             </div>\
             </li>');
         })
    }
    function orderD(node){
        var demandId = node.getAttribute("demandId");
        //alert(demandId);
        sessionStorage.setItem("demandId", demandId);
        location.href='orderDetail.html';
    }

    function info(node){
        var userId = node.getAttribute("userId");
        //alert(userId);
        sessionStorage.setItem("userId", userId);
        location.href='../find/friendInfo.html';
    }
    function chat(){
        location.href='../system/message.html';
    }
    /*热门排序*/
    $("#sortBtn").on("click",function(){
        $("#sort").fadeIn("slow");
        $("#dist").hide();
    })
    function sortC(node){
    	
        $.ajax({
            type: "post",
            url: '/randomdelivery/userPurchaseController/orderByHomePage',
            data: {
            	temp:0
            },
            datatype: "json",
            success: function (data) {
                alert(JSON.stringify(data));
                $(".sort div").removeClass("act");
                var sortBtn = $("#sortBtn").html()
                 var method = node.innerHTML;
                 node.className='act';
                 $("#sort").fadeOut("slow");
                 $("#sortBtn").html(method);
                 search(data);
            }

        });
    
        //alert(sortBtn);
    }
    /*距离排序*/
    $("#sortBtn1").on("click",function(){
        $("#dist").fadeIn("slow");
        $("#sort").hide();
    })
    function sortD(node){
        $(".dist div").removeClass("act");
        var sortBtn1 = $("#sortBtn1").html()
        var method = node.innerHTML;
        node.className='act';
        $(".dist").fadeOut("slow");
        $("#sortBtn1").html(method);
        //alert(sortBtn);
    }
    
    
    /* 搜索 */
    $("#ser").on("click",function(){
    	var str = $("#search-input").val();
        $.ajax({
            type: "post",
            url: '/randomdelivery/userPurchaseController/seletByHomePage',
            data: {
            	temp:str
            },
            datatype: "json",
            success: function (data) {
                alert(JSON.stringify(data));
                viewList(data);
               $("#search-input").val("");
            }

        });
    	
    })
</script>
<script>
    refresher.init({
        id:"wrapper",
        pullDownAction:Refresh,
        pullUpAction:Load
    });
    function Refresh() {
        setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
            el =document.querySelector("#wrapper ul");
            //这里写你的刷新代码
            document.getElementById("wrapper").querySelector(".pullDownIcon").style.display="none";
             setTimeout(function () {
                wrapper.refresh();
                var el, li, i;
                el =document.querySelector("#wrapper ul");
                 $.each(data.msg,function(num,data){
                    li = document.createElement('li');
                    li.innerHTML = ' <div class="aui-card-list" >\
                    <div class="userinfo-header">\
                    <div class="aui-info aui-border-b" style="padding: 7px 0">\
                    <div class="aui-info-item">\
                    <img onclick="info(this)" userId="'+data.userId+'" src="'+data.headPortraitUrl+'" style="width:1.5rem;margin-left: 5px;border-radius:100%"/>\
                    <span class="aui-margin-l-10">'+data.nickname+'</span>&nbsp;&nbsp;<span class="fa fa-star" style="color: #FFC107"></span>\
            </div>\
            <div class="aui-info-item" style="padding-right: 10px;font-size: 11px">'+data.demandCreatetime+'<div style="float: right;font-size: 11px">&nbsp;| 距离1.1km</div></div>\
            </div>\
            </div>\
            <div class="aui-card-list-content-padded" demandId="'+data.demandId+'"onclick="orderD(this)" style="height: 100%">\
            <div class="store">'+data.purchaseStore+'</div>\
            <div class="place">('+data.purchasePlace+')</div>\
                  <div class="trade"><i class="fa fa-shopping-cart" style="color: #fba999" aria-hidden="true"></i>&nbsp;&nbsp;'+data.tradeName+'</div>\
            </div>\
            </div>';
                    el.insertBefore(li, el.childNodes[0]);
                })
            },1000);//模拟qq下拉刷新显示成功效果
            /****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
        }, 1000);
    }
    function Load() {
        setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
        el =document.querySelector("#wrapper ul");
            $.each(data.msg,function(num,data){
            li = document.createElement('li');
            li.innerHTML=' <div class="aui-card-list" >\
                    <div class="userinfo-header">\
                    <div class="aui-info aui-border-b" style="padding: 7px 0">\
                    <div class="aui-info-item">\
                    <img onclick="info(this)" userId="'+data.userId+'" src="'+data.headPortraitUrl+'" style="width:1.5rem;margin-left: 5px;border-radius:100%"/>\
                    <span class="aui-margin-l-10">'+data.nickname+'</span>&nbsp;&nbsp;<span class="fa fa-star" style="color: #FFC107"></span>\
            </div>\
            <div class="aui-info-item" style="padding-right: 10px;font-size: 11px">'+data.demandCreatetime+'<div style="float: right;font-size: 11px">&nbsp;| 距离1.1km</div></div>\
            </div>\
            </div>\
            <div class="aui-card-list-content-padded" demandId="'+data.demandId+'"onclick="orderD(this)" style="height: 100%">\
            <div class="store">'+data.purchaseStore+'</div>\
            <div class="place">('+data.purchasePlace+')</div>\
                  <div class="trade"><i class="fa fa-shopping-cart" style="color: #fba999" aria-hidden="true"></i>&nbsp;&nbsp;'+data.tradeName+'</div>\
            </div>\
            </div>';
            el.appendChild(li, el.childNodes[0]);
        })
        wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
    },1000);
    }
</script>
</body>
</html>